<template>
  <div>
    <h1>{{ message }}</h1>
        <button @click="changeMessage">打印message</button>
        <h1>{{ state1.count }}</h1>
        <button @click="setCount1">count+1</button>
        <h1>{{ count2 }}</h1>
        <button @click="setCount2">count2+1</button>
        <h1>{{ state2.count }}</h1>
        <button @click="setCount3">count2+1</button>
        <hr>
  </div>
</template>
<script setup>
  import { reactive } from "vue"; 
   import { ref } from "vue";
   const count2=ref(0)
   const state2=ref({
    count:1 
   })
   const setCount3=()=>{
    state2.value.count++ 
   }
   const setCount2=()=>{
    count2.value++ 
   }
   let message="hello,world"
   const changeMessage=()=>{
     message="hello,world2"
      console.log(message); 
   }
   const state1=reactive({
    count:1
   })
   const setCount1=()=>{
    state1.count++
   }
</script>
<script>
export default {
   name:'BaseC'
}
</script>

<style>

</style>